<template>
  <div class="preparation">
    <a-row>
      <a-col :span="4">
        <ul class="tabs">
          <li :class="{active: current === index}" v-for="(item, index) in ['小组约定', '小组前后测评表', '小组工作过程记录表', '小组组员观察记录表']" @click="current = index">{{item}}</li>
        </ul>
      </a-col>
      <a-col :span="20">
        <table1 v-if="current == 0" :detail="detail"></table1>
        <table2 v-if="current == 1"></table2>
        <table3 v-if="current == 2"></table3>
        <table4 v-if="current == 3"></table4>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import table1 from './components/table1'
  import table2 from './components/table2'
  import table3 from './components/table3'
  import table4 from './components/table4'
  export default {
    props: {
      detail: Object
    },
    components: {
      table1,
      table2,
      table3,
      table4
    },
    data() {
      return {
        current: 0,
      }
    }
  }
</script>

<style lang="less" scoped>
  .preparation {
    width: 100%;
    background-color: #fff;
    .tabs{
      list-style: none;
      padding: 0;
      li{
        padding: 16px 24px;
        text-align: right;
        border-right: 3px solid transparent;
        cursor: pointer;
      }
      .active{
        color: rgb(24, 144, 255);
        border-color: rgb(24, 144, 255);
      }
    }
  }
</style>
